<template>
	<view>
		<text>请选择查询的城市</text>
		<uni-data-picker @change="changeCity" :map="{text:'text',value:'text'}" :localdata="cityList" v-model="city" placeholder="请选择城市" popup-title="请选择"></uni-data-picker>
		<view v-if="data" style="display: flex;" class="justify-center">{{data.city}}</view>
		<uni-section title="天气" type="line"></uni-section>
		<uni-list v-if="data">
			<uni-list-item title="日期" :right-text="data.data.date"></uni-list-item>
			<uni-list-item title="星期" :right-text="data.data.week"></uni-list-item>
			<uni-list-item title="天气" :right-text="data.data.type"></uni-list-item>
			<uni-list-item title="最低温度" :right-text="data.data.low"></uni-list-item>
			<uni-list-item title="最高温度" :right-text="data.data.high"></uni-list-item>
			<uni-list-item title="风向" :right-text="data.data.fengxiang"></uni-list-item>
			<uni-list-item title="风力" :right-text="data.data.fengli"></uni-list-item>
			<uni-list-item style="display: flex;font-size: 14px;color: #3b4144;">
				<template v-slot:body>
					<view style="flex: 1;">夜晚</view>
					<view style="flex: 1;">天气：{{data.data.night.type}}</view>
					<view style="flex: 1;">风向：{{data.data.night.fengxiang}}</view>
					<view style="flex: 1;">风力：{{data.data.night.fengli}}</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-section title="空气质量" type="line"></uni-section>
		<uni-list v-if="data">
			<uni-list-item title="空气质量名称" :right-text="data.air.aqi_name"></uni-list-item>
			<uni-list-item title="空气质量数值" :right-text="data.air.aqi+''"></uni-list-item>
			<uni-list-item title="空气质量等级" :right-text="data.air.aqi_level+''"></uni-list-item>
			<uni-list-item title="一氧化碳" :right-text="data.air.co+'mg/m³'"></uni-list-item>
			<uni-list-item title="臭氧浓度" :right-text="data.air.o3+'μg/m³'"></uni-list-item>
			<uni-list-item title="二氧化硫浓度" :right-text="data.air.so2+'μg/m³'"></uni-list-item>
			<uni-list-item title="可吸入颗粒物pm10" :right-text="data.air.pm10+'μg/m³'"></uni-list-item>
			<uni-list-item title="可吸入颗粒物2.5" :right-text="data.air['pm2.5']+'μg/m³'"></uni-list-item>
		</uni-list>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import { onPullDownRefresh } from '@dcloudio/uni-app';
	//从外部目录中导入josn数据
	import cityList from '@/utils/city.json';
	const city=ref(null);
	const data=ref(null);
	
	onPullDownRefresh(()=>{
		getData(city.value);
	});
	
	function getData(chengshi){
		city.value=chengshi;
		uni.request({
			url: 'https://api.vvhan.com/api/weather',
			data:{city:chengshi},
			method: 'GET',
			success: res => {
				data.value=res.data;
			},
			complete:()=>{
				uni.stopPullDownRefresh();
				uni.showToast({icon:'none',title:'获取最新天气成功'});
			}
		});
	}
	
	function changeCity(e){
		getData(city.value);
	}
	
	uni.getLocation({
		type: 'gcj02',
		geocode:true,
		success: res => {
			if(res.address && res.address.country && res.address.country!='California'){
				getData(res.address.city);
			}else{
				getData('西安');
			}
		}
	});
</script>